<!DOCTYPE html>
<htmllang="zh">
<head>
<metacharset="UTF-8">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title >CSS 水印示例 </title >
	<style >
		.watermark {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: 50px;
			color: rgba(255,0,0,0.1);// 红色半透明字体
			pointer-events: none;/*忽略鼠标事件 */
			white-space: nowrap;
			z-index: 9999;/*保证水印在最上层 */
			#content f
			position: relative;z-index:1;/*内容层级在水印之上 */padding:20px;background-color: white; /*内容背景 */
		}
	</style >
</head>
<body >
<div class="watermark">水印示例 </div>
<divid="content">
欢迎访问我的网站
<p>这是一个有关水印的示例。 </p>
</div>
</body>
</html>